<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
    <el-tab-pane :label="'已点评(' + queryParams1.total + ')'" name="first">
      <div class="tips" v-if="queryParams1.total === 0">还未点评任何学员</div>
      <el-table v-loading="loading" :data="list1" border v-else>
        <el-table-column label="学员" align="center" prop="name" />
        <el-table-column label="到课状态" align="center" prop="tstate">
          <template #default="scope">{{
            {
              "1": "未开课",
              "2": "到课",
              "3": "迟到",
              "4": "请假",
              "5": "未到",
            }[scope.row.tState]
          }}</template>
        </el-table-column>
        <!-- <el-table-column label="绑定微信" align="center" prop="weixin" /> -->
        <el-table-column
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">
              评价详情
            </el-button>
            <el-button link type="primary" @click="handleGrant(scope.row)">
              发放积分
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="queryParams1.total > 0"
        :total="queryParams1.total"
        v-model:page="queryParams1.pageNum"
        v-model:limit="queryParams1.pageSize"
        @pagination="getList1"
      />
    </el-tab-pane>
    <el-tab-pane :label="'未点评(' + queryParams2.total + ')'" name="second">
      <div class="tips" v-if="queryParams2.total === 0">
        辛苦了，所有学员已点评
      </div>
      <div v-else>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              @click="handleMultiComment"
              :disabled="!ifZb"
            >
              批量点评
            </el-button>
          </el-col>
        </el-row>
        <el-alert
          title="仅主班老师可评价学员。"
          type="warning"
          show-icon
          :closable="false"
        />
        <el-table
          v-loading="loading"
          :data="list2"
          border
          @selection-change="handleSelectionChange"
          :row-key="(row) => row.id"
          ref="table2"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            reserve-selection
          />
          <el-table-column label="学员" align="center" prop="name" />
          <el-table-column label="到课状态" align="center" prop="tstate">
            <template #default="scope">{{
              {
                "1": "未开课",
                "2": "到课",
                "3": "迟到",
                "4": "请假",
                "5": "未到",
              }[scope.row.tState]
            }}</template>
          </el-table-column>
          <!-- <el-table-column label="绑定微信" align="center" prop="weixin" /> -->
          <el-table-column
            label="操作"
            align="center"
            width="150"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleComment(scope.row)"
                v-if="scope.row.code === '0'"
              >
                去评价
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="queryParams2.total > 0"
          :total="queryParams2.total"
          v-model:page="queryParams2.pageNum"
          v-model:limit="queryParams2.pageSize"
          @pagination="getList2"
        />
      </div>
    </el-tab-pane>
  </el-tabs>
  <DrawComment ref="drawComment" @refreshPage="refreshPage" />
  <ViewComment ref="viewComment" />
  <GrantDialog ref="gdRef" />
</template>

<script setup>
import { getEvaluateListAPI } from "@/api/interaction/comment";
import DrawComment from "./drawComment.vue";
import ViewComment from "./viewComment.vue";
import GrantDialog from "@/views/marketing/points/grantDialog.vue";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const activeName = ref("first");
const list1 = ref([]); // 已点评列表
const list2 = ref([]); // 未点评列表
const currentItem = ref({}); // 从父组件传来的入参map
const drawComment = ref(null);
const viewComment = ref(null);
const gdRef = ref(null);
const selectedList = ref([]);
const table2 = ref(null);
const data = reactive({
  //已点评
  queryParams1: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    state: 0,
    orderNo: null,
  },
  queryParams2: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    state: 1,
    orderNo: null,
  },
});
const ifZb = ref(false); // 是否是主班老师，'0'是，可评价-控制批量点评

const { queryParams1, queryParams2 } = toRefs(data);

// 事件----------------------------------------------------------------------------------------------------
const props = defineProps({
  classId: {
    type: String,
    default: null,
  },
});

function handleTabClick(tab) {
  if (tab.paneName == "first") {
    initPage1();
  } else {
    initPage2();
  }
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  selectedList.value = selection; //.map((item) => item.id);
}

// 去评价
function handleComment(row) {
  //row.courseId = currentItem.value.courseId;
  drawComment.value.openW([row], currentItem.value.courseIdC);
}

// 批量点评
function handleMultiComment() {
  if (selectedList.value.length === 0) {
    proxy.$modal.msgError("请选择待评价学员");
    return;
  }
  drawComment.value.openW(selectedList.value, currentItem.value.courseId);
}

// 查看评价详情
function handleView(row) {
  viewComment.value.openW(row);
}

// 发放积分
function handleGrant(row) {
  gdRef.value.handleDialogOpen(row.tId);
}

// 调用------------------------------------------------------------------------------------------------------

function initPage(item) {
  const { orderNo, classId } = item;
  currentItem.value = item;
  activeName.value = "first";
  if (orderNo) {
    queryParams1.value.orderNo = orderNo;
    queryParams2.value.orderNo = orderNo;
  }
  initPage1();
  initPage2();
}

function refreshPage() {
  initPage1();
  initPage2();
  table2.value.clearSelection();
}

function initPage1() {
  queryParams1.pageNum = 1;
  getList1();
}

function initPage2() {
  queryParams2.pageNum = 1;
  getList2();
}

function getList1() {
  loading.value = true;
  getEvaluateListAPI(proxy.addDateRange(queryParams1.value, [])).then(
    (response) => {
      list1.value = response.rows;
      queryParams1.value.total = response.total;
      loading.value = false;
    }
  );
}
function getList2() {
  loading.value = true;
  getEvaluateListAPI(proxy.addDateRange(queryParams2.value, [])).then(
    (response) => {
      list2.value = response.rows;
      queryParams2.value.total = response.total;
      loading.value = false;
      ifZb.value =
        list2.value && list2.value.length > 0
          ? list2.value[0].code === "0"
          : false;
    }
  );
}

// setTimeout(() => {
//   handleComment({});
// }, 500);

defineExpose({ initPage });
</script>

<style lang="scss" scoped>
.tips {
  display: flex;
  align-items: center;
  height: 200px;
  justify-content: center;
}
</style>
